import React, { useState } from 'react';

import { message, Modal } from 'antd';
import { connect } from 'umi';
import { history } from 'umi'

import logo from '@/assets/vvlogo.png';
import { useRequest } from '@/hooks';
import { fetchQueryEmployeeFlag, fetchReadWelcomeLetterConfirm } from '@/pages/EntryManage/services';

import ChangePassword from './ChangePassword';
import CheckOfficeGoods from './CheckOfficeGoods';
import { CHANGE_PASSWORD_STEP, CHECK_OFFICE_GOODS, WELCOME_NEW_EMPLOYEE } from './constants';
import styles from './index.less';
import WelcomeLetter from './WelcomeLetter';

const WELCOME_STEP = {
    0: '修改密码',
    1: '致新员工欢迎信',
    2: '确认资产信息'
};

/**
 * 欢迎新员工弹窗
 */
const WelcomeModal = ({ dispatch }) => {
    const [visible, setVisible] = useState(false);
    const [step, setStep] = useState(null);

    useRequest(fetchQueryEmployeeFlag, {
        onSuccess: result => {
            const { code, data, msg } = result || {};
            if (code === 10000) {
                const { changePwdFlag, welcomeLetterFlag } = data;
                dispatch({
                    type: 'global/save',
                    payload: {
                        welcomeEnable: [changePwdFlag, welcomeLetterFlag].includes(0)
                    }
                });
                if (welcomeLetterFlag) {
                    setVisible(false);
                } else if (changePwdFlag) {
                    setVisible(true);
                    setStep(WELCOME_NEW_EMPLOYEE);
                } else {
                    setVisible(true);
                    setStep(CHANGE_PASSWORD_STEP);
                }
            } else {
                message.error(msg);
            }
        }
    });

    const { run: completeWelcomeNewEmployee } = useRequest(fetchReadWelcomeLetterConfirm, {
        manual: true
    });

    const handleJumpToStep = jumpStep => {
        setStep(jumpStep);
    };

    const handleFinishedStep = async () => {
        const result = await completeWelcomeNewEmployee();
        if (result?.code === 10000) {
            localStorage.removeItem('officeGoods');
            setVisible(false);
            history.push({
                pathname: '/personal/myInfo',
                query: {
                    tab: 'personal'
                },
                state: { tabRoute: true, tabRefresh: true }
            });
        }
    };

    return (
        <Modal
            visible={visible}
            className={styles.welcomeModal}
            footer={null}
            closable={false}
            wrapClassName={styles.welcomeModalBody}
        >
            <header className={styles.welcomeHeader}>
                <img src={logo} alt="logo" />
                <h2>{WELCOME_STEP[step]}</h2>
            </header>
            <article className={styles.welcomeBody}>
                {step === CHANGE_PASSWORD_STEP && <ChangePassword />}
                {step === WELCOME_NEW_EMPLOYEE && <WelcomeLetter onJumpToStep={handleJumpToStep} />}
                {step === CHECK_OFFICE_GOODS && (
                    <CheckOfficeGoods onJumpToStep={handleJumpToStep} onFinishedStep={handleFinishedStep} />
                )}
            </article>
        </Modal>
    );
};

export default connect()(WelcomeModal);
